<template>
    <h1>当前求和为：{{sum}}</h1>
    <button @click="sum++">点我加1</button>
    <br>
    <h2>当前的信息为：{{msg}}</h2>
    <button @click="msg = msg + '!'">修改</button>
    <h1>人的信息</h1>
    <h2>姓名：{{person.name}}</h2>
    <h2>姓名：{{person.age}}</h2>
    <h2>薪资：{{person.job.j1.salary}}K</h2>
    <button @click="person.name+='~'">修改姓名</button>
    <button @click="person.age++">增长年龄</button>
    <button @click="person.job.j1.salary++">增长薪资</button>
</template>

<script>
  import {reactive, ref,watch} from 'vue'
  export default {
    name: 'Demo',
    //vue2中监视属性
    /* watch:{
      //简写
      // sum(newVal,oldVal){
      //   console.log('sum的值变化了',newVal,oldVal)
      // }

      //完整：
      sum:{
        immediate:true,
        deep:true,   //深度监视
        handler(newVal,oldVal){
          console.log('sum的值变化了',newVal,oldVal)
        }
      }
    }, */

    setup(){
        
      let sum = ref(0)
      let msg = ref('你好啊')
      let person = reactive({
        name:'张三',
        age:18,
        job:{
          j1:{
            salary:20
          }
        }
      })

      //情况一：监视ref所定义的一个响应式数据
     /*  watch(sum,(newVal,oldVal)=>{
        consloe.log('sum的值变化了，',newVal,oldVal)
      }) */

      //情况二：监视ref所定义的多个响应式数据
      /* watch([sum,msg],(newVal,oldVal)=>{
        console.log('sum或msg的值变化了，',newVal,oldVal)
      },{immediate:true}) */

      //情况三：监视reactive所定义的一个响应式数据  
      //1、注意：此处无法正确的获取oldVal
      //2、注意：强制开启了深度监视（deep配置无效）
      /* watch(person,(newVal,oldVale) => {
        console.log('person变化了',newVal,oldVale)
      },{deep:true})   //此处的deep配置无效 */


      //情况四：监视reactive所定义的一个响应式数据中的某个属性
      /* watch(person,(newVal,oldVale) => {
        console.log('person变化了',newVal,oldVale)
      }) */

      //情况五：监视reactive所定义的一个响应式数据中的某些属性
     /*  watch([() => person.name,()=>person.age],(newVal,oldVal)=>{
        console.log('person的name变化了，',newVal,oldVal)
      }) */

      //特殊情况;
     /*  watch(() => person.job,(newVal,oldVal) => {
        console.log('person的job变化了，',newVal,oldVal)
      },{deep:true})   //此处由于监视的是reactive所定义的对象中的某个属性，所以deep配置有效 */

      //返回一个对象（常用）
      return {
        sum,
        msg,
        person
      }

    },
  }
</script>

